<template>
  <div class="admin">
    <el-container class="index-container">
      <el-header>
        <!-- <div class="logo"></div> -->
        <button @click="toChangeLang">12322</button>
      </el-header>
      <el-container class="index-container">
        <!-- 左侧导航 -->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <v-nav></v-nav>
        </el-aside>
        <!-- 内容 -->
        <el-container>
          <el-main>
            <tag-nav></tag-nav>
            <div class="el-router">
              <keep-alive :include="tagNavList">
                <router-view></router-view>
              </keep-alive>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import nav from '@/components/nav/nav';
import TagNav from './tagNav';
import {mapMutations} from 'vuex';
export default {
  components: {
    'v-nav': nav,
    TagNav
  },
  data () {
    return {};
  },
  created () {
    // console.log(this.$store.state.lang);
  },
  computed: {
    tagNavList () {
      return this.$store.state.tagNav.cachedPageName;
    }
  },
  methods: {
    ...mapMutations({
      setLang: 'SET_LANG'
    }),
    toChangeLang () {
      this.setLang(new Date().getTime());
    }
  }

};

</script>

<style lang="stylus" scoped>
@import '../../common/mixin.styl'

.admin
  height 100%
.el-header
  background-color #B3C0D1
  color #333
  text-align center
  box-shadow 0px 5px 5px #888888
.logo
  width 160px
  height 60px // background url('logo.png') no-repeat left center;
  background-size auto 40px
.index-container,.el-main
  height 100%
.el-main
  display flex
  flex-direction column
  // justify-content center
  // height 100%
  padding 0
  .el-router
    flex 1
    padding 20px
    background #fff
    overflow-x hidden
    overflow-y auto
    min-height 0
</style>
